<template>
  <div
    class="menu-item"
    :class="{
      'menu-item--active': active,
    }" v-if="menu.show"
  >
    <div class="menu-item__icon">
      <img :src="active ? menu.activeIcon : menu.icon" />
    </div>
    <div class="menu-item__label">
      {{ menu.label }}
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  menu: Object,
  active: Boolean,
})
const userStore = useUserStore()
const beforeStyle = ref({})
</script>
<style lang="scss" scoped>
.menu-item {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-left: 40px;
}

.menu-item__icon {
  width: 20px;
  height: 20px;

  img {
    width: 100%;
  }
}

.menu-item__label {
  font-size: 16px;
  color: #333;
  margin-left: 8px;
  font-family: AlibabaPuHuiTi_2_55_;
}
.menu-item--active .menu-item__label {
  opacity: 1;
}

.menu-item--active .menu-item__label {
  color: var(--pcmain-color) !important;
}
</style>
